<template>
<!-- 楼宇管理 -->
        <!-- 数据表格 -->
        <div class="datalists">
            <div class="datalistsname">数据列表</div>
            <!-- 添加按钮 -->
            <!-- <el-button type="primary" class="append" @click="append"><i class="el-icon-plus"></i>添加车位</el-button> -->
            <!-- 批量添加 -->
            <!-- <el-button type="primary" class="appends" @click="appends">导入数据</el-button> -->
            <!-- 数据表格 -->
            <div class="datatable">
                <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%">
                    <el-table-column
                    prop="date"
                    label="序号"
                    width="52">
                    </el-table-column>
                    <el-table-column
                    prop="licenseplatenumber"
                    label="车牌号"
                    width="177">
                    </el-table-column>
                    <el-table-column
                    prop="vehicletype"
                    label="车辆类型"
                    width="122">
                    </el-table-column>
                    <el-table-column
                    prop="carowner"
                    label="车主"
                    width="122">
                    </el-table-column>
                    <el-table-column
                    prop="phone"
                    label="手机号"
                    width="115">
                    </el-table-column>
                    <el-table-column
                    prop="Entranceexitgates"
                    label="出入闸机"
                    width="106">
                    </el-table-column>
                    <el-table-column
                    prop="Paymentmethod"
                    label="支付方式"
                    width="102">
                    </el-table-column>
                    <el-table-column
                    prop="accesstime"
                    label="出入时间"
                    width="102">
                    </el-table-column>
                    <el-table-column
                    prop="Enteringexitingcommunity"
                    label="出入小区"
                    width="124">
                    </el-table-column>
                    <el-table-column
                    prop="operate"
                    label="操作"
                    width="193">
                        <template slot-scope="scope">
                            <i class="el-icon-office-building"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="building(scope.row.date)">{{ scope.row.edit }}</span>
                        </template>
                    </el-table-column>
                    
                </el-table>
                <!-- 分页器 -->
                <div class="block">
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage2"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="50"
                    layout=" prev, pager, next, sizes,jumper"
                    :total="500">
                    </el-pagination>
                </div>
            </div>
        </div>
</template>

<script>
export default {
    data(){
        return{
            options: [{
            value: '选项1',
            label: '万达文旅城'
            }, {
            value: '选项2',
            label: '碧桂园'
            }, {
            value: '选项3',
            label: '万象城'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
            value2: [],
            tableData: [
                {
                    date: '1',
                    licenseplatenumber: '京A139292',
                    vehicletype: '月租车',
                    carowner:'赵小刚',
                    phone:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Paymentmethod:'月租',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    edit:'查看',
                }, 
                {
                    date: '2',
                    licenseplatenumber: '京A139292',
                    vehicletype: '月租车',
                    carowner:'赵小刚',
                    phone:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Paymentmethod:'月租',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    edit:'查看',
                }, 
                {
                    date: '3',
                    licenseplatenumber: '京A139292',
                    vehicletype: '月租车',
                    carowner:'赵小刚',
                    phone:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Paymentmethod:'月租',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    edit:'查看',
                }, 
                {
                    date: '4',
                    licenseplatenumber: '京A139292',
                    vehicletype: '月租车',
                    carowner:'赵小刚',
                    phone:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Paymentmethod:'月租',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    edit:'查看',
                }, 
                {
                    date: '5',
                    licenseplatenumber: '京A139292',
                    vehicletype: '月租车',
                    carowner:'赵小刚',
                    phone:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Paymentmethod:'月租',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    edit:'查看',
                }, 
                {
                    date: '5',
                    licenseplatenumber: '京A139292',
                    vehicletype: '月租车',
                    carowner:'赵小刚',
                    phone:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Paymentmethod:'月租',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    edit:'查看',
                }, 
                {
                    date: '5',
                    licenseplatenumber: '京A139292',
                    vehicletype: '月租车',
                    carowner:'赵小刚',
                    phone:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Paymentmethod:'月租',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    edit:'查看',
                }, 
                {
                    date: '5',
                    licenseplatenumber: '京A139292',
                    vehicletype: '月租车',
                    carowner:'赵小刚',
                    phone:'13013001300',
                    Entranceexitgates:'西门1号闸机',
                    Paymentmethod:'月租',
                    accesstime:'2021-08-25 14:54',
                    Enteringexitingcommunity:'万象城',
                    edit:'查看',
                }, 

            ],//数据表格数据
            currentPage1: 5,
            currentPage2: 1,
            currentPage3: 5,
            currentPage4: 4,//分页器数据
        }
    },
    methods:{
        select(){
            console.log("查询")
        },
        reasert(){
            console.log("重置")
        },
        appends(){
            console.log("批量添加")
        },
        append(){
            console.log("添加")
        },
        // 分页器打印
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 数据表格中楼宇管理、编辑和删除
        building(i){
            console.log("楼宇管理",i)
        },
        edit(){
            console.log('编辑')
        },
        del(){
            console.log('删除')
        }
    }
};
</script>

<style lang="scss" scoped>
    // 数据列表
    .datalists{
        width: 1260px;
        padding: 0 20px;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        position: relative;
        box-sizing: border-box;
        // 数据列表名字名称
        .datalistsname{
            margin-top: 40px;
            width: 57px;
            height: 18px;
            line-height: 18px;
            color: #666666;
            font-size: 14px;
        }
        // 添加数据按钮
        .append,.appends{
            width: 80px;
            height: 35px;
            position: absolute;
            right: 20px;
            top: 23px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0079fe !important;
            .el-icon-plus,.el-icon-folder-add{
                font-size: 16px;
                margin-right: 5px;
                font-weight: 700;
            }
        }
        .append:hover,.appends:hover{
            background-color: #66b1ff !important;
            color: #fff !important;
        }
        .appends{
            position: absolute;
            padding: 0 2px;
            right: 120px;
            top: 23px;
        }
        // 数据表格
        .datatable{
            margin-top: 20px;
            ::v-deep .has-gutter th{
                height: 45px !important;
                background-color: #f5f5f5;
                box-sizing: border-box;
                padding: 0 !important;
                font-size: 14px;
                color: #666666;
                font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑' !important;
            }
            ::v-deep .el-table__row td{
                height: 50px !important;
                padding: 0 !important;
            }
            ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                background-color: #f9f9f9;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(2){
                // text-align: center !important;
                color: #333 !important;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(1){
                color: #333 !important;
                text-align: center;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(4){
                color: #333 !important;
            }
            ::v-deep .el-table__row .el-table__cell:nth-last-child(1){
                text-align: center;
                color: #0079fe;
                // cursor: pointer;
            }
            ::v-deep .el-table__row .el-table__cell:nth-last-child(1) span:hover{
                cursor: pointer;
                text-decoration: underline !important;
                // color: #4a4a4a;
            }
            ::v-deep .el-table__row .el-table__cell{
                color: #666666;
                font-size: 12px;
            }
            ::v-deep .el-table__row:hover{
                background-color: inherit !important;
            }
            // 分页
            .block{
                display: flex;
                justify-content: end;
                ::v-deep .el-pagination__sizes{
                    margin-left: 10px;
                    width: 80px;
                    height: 35px;
                    line-height: 35px;
                }
                ::v-deep .btn-prev,::v-deep .el-pager li,::v-deep .btn-next{
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    background-color: #fff;
                    border: 1px solid rgba(228, 228, 228, 1);
                }
                ::v-deep .el-pager .active{
                    background-color: #0079fe !important;
                }
                ::v-deep .el-pager .active:hover{
                    color: #fff !important;
                    border: 1px solid rgb(228, 228, 228) !important;
                    box-sizing: border-box;
                }
                ::v-deep .el-pager li:hover,::v-deep .btn-prev:hover,::v-deep .btn-next:hover,::v-deep  .el-pagination__sizes .el-input .el-input__inner:hover {
                    border-color: #0079fe;
                    color: #0079fe;
                }
                ::v-deep .el-input--mini .el-input__inner,::v-deep .el-input--mini .el-input__icon {
                    height: 35px;
                    line-height: 35px;
                }
                ::v-deep .el-pagination .el-select .el-input {
                    width: 86px;
                    margin: 0 5px;
                }
                ::v-deep .el-pagination__jump{
                    height: 35px;
                    line-height: 35px;
                }
                ::v-deep .el-input__inner:focus {
                    border-color: rgb(228, 228, 228) !important;
                    outline: 0;
                }
            }
        }
    }
</style>    